<template>
	<view class="background-container" :style="{ backgroundImage: `url(${bgImages.treatmentRoom})` }">
		<timeModule></timeModule>
		<view class="wash-hands" @click="enterHandwashing"></view>
		<view class="cabinet" @click="cabinet"></view>
		<bulletScreen></bulletScreen>
		<view class="next" @click="handleNext">
			<uni-icons type="right" color="#fff" size="50" ></uni-icons>
		</view>	
		<!-- 医疗车页面 -->
		<view class="treatment-cart" :style="{ backgroundImage: `url(${uiImages.treatmentCartIcon})` }" @click="showCartPopup = true">
			<!-- 物品不再在车上显示 -->
		</view>
		<!-- 弹窗图片 -->
		<view v-if="showCartPopup" class="popup-mask" @click.self="showCartPopup = false">
			<view class="popup-img-container">
				<image class="popup-img-full" :src="uiImages.treatmentCartPopupBg" mode="contain" />
				<!-- 新增中间层图片 -->
				<image class="popup-img-middle" :src="uiImages.treatmentCartPopupMiddle" mode="" />
				<!-- 物品渲染在图片上 -->
			<image
					v-for="(item, idx) in cartItems"
				:key="item.id"
					class="popup-item"
				:src="item.image"
					:style="getItemStyle(idx, cartItems.length)"
					mode="aspectFit"
					@click.stop="returnToCabinet(item)"
			/>
			</view>
		</view>
		<!-- 添加前往走廊的按钮 -->
		<view class="corridor-button" @click="goToCorridor">
			<text>返回走廊</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import { items as resourceItems, bgImages, uiImages } from '@/src/dataResource.js';

// 物品数据
const allItems = resourceItems;

const cartItems = ref([]);
const showCartPopup = ref(false)
// 物品在弹窗图片上的布局（横向均分）
function getItemStyle(idx, total) {
	const left = 120 + idx * (60 + 10); // 30rpx起始，60rpx宽，10rpx间隔
	return `position:absolute;top:60rpx;left:${left}rpx;width:60rpx;height:60rpx;z-index:2;`;
}

function updateCart() {
	// 只显示所有Position为cart的物品
	cartItems.value = allItems.filter(item => {
		const pos = uni.getStorageSync(item.id + 'Position');
		// console.log('体温计',item.id.pos);
		return pos === 'cart';
	});
	
}

onMounted(() => {
	updateCart();
	uni.$on('addToCart', (item) => {
		updateCart();
	});
	allItems.forEach(item => {
		console.log(`${item.name}(${item.id}) Position:`, uni.getStorageSync(item.id + 'Position'));
	});
});

onShow(() => {
	updateCart();
});

const enterHandwashing = () => {
	uni.navigateTo({
		url: "/pages/treatmentRoom/washhands"
	});
};

const cabinet = () => {
	uni.navigateTo({
		url:"/pages/treatmentRoom/cabinet"
	})
}
const handleNext = () =>{
	// 进入病房前，将所有cart中的物品Position设为'ward'
	allItems.forEach(item => {
		if (uni.getStorageSync(item.id + 'Position') === 'cart') {
			uni.setStorageSync(item.id + 'Position', 'ward');
		}
	});
	uni.navigateTo({
		url:"/pages/ward/ward"
	})
}

// 放回cabinet
const returnToCabinet = (item) => {
	if (uni.getStorageSync(item.id + 'Position') !== 'ward') {
		uni.setStorageSync(item.id + 'Position', 'cabinet');
		updateCart();
	}
};

// 添加前往走廊的导航函数
const goToCorridor = () => {
	uni.navigateTo({
		url: '/pages/corridor/corridor'
	});
}
</script>

<style lang="scss" scoped>
.background-container{
	width: 100%;
	height: 305rpx;
	/* background-image: url(''+bgImages.cabinet); */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative; /* 添加相对定位 */
	z-index: 1; /* 正值让背景在最底层 */
	.wash-hands{
		position: absolute;
		left: 60rpx;
		bottom: 85rpx;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50rpx; 
		background-color: #fff;
		filter: blur(1px); /* 模糊半径 */
		z-index: 2; /* 确保在背景上面，弹幕下面 */
		pointer-events: auto; /* 确保点击事件有效 */
	}
	.cabinet{
		position: fixed;
		left: 300rpx;
		top: 180rpx;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50rpx;
		background-color: #fff;
		filter: blur(1px); /* 模糊半径 */
		z-index: 2; /* 确保在背景上面，弹幕下面 */
		pointer-events: auto; /* 确保点击事件有效 */
	}
	.next{
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		z-index: 20; /* 高于弹幕，确保可点击 */
		pointer-events: auto; /* 确保点击事件有效 */
		}
	.treatment-cart{
		position: fixed;
		/* background-image: url('https://i.postimg.cc/8PdY1Fzx/20250718160816.png'); */
		right: 220rpx;
		top: 110rpx;
		width: 100rpx;
		height: 200rpx;
		border-radius: 20rpx;
		padding: 0;
		z-index: 2;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		.thermometer{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 80rpx;
			right: 80rpx;
		}
	}
	/* 洗手台面弹窗样式优化 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(16px); /* 背景模糊 */
		background: rgba(255,255,255,0.18); /* 半透明融合 */
		.popup-img-container {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 320rpx;
			height: 240rpx;
			.popup-img-full {
				width: 320rpx;
				height: 240rpx;
				border-radius: 24rpx;
				box-shadow: 0 8rpx 32rpx rgba(42,130,228,0.10);
				object-fit: contain;
				// background: #fff;
				z-index: 1;
			}
			.popup-img-middle {
				position: absolute;
				right: 30rpx;
				top: 60;
				width: 200rpx;
				height: 130rpx;
				z-index: 2;
				pointer-events: none;
			}
			.popup-item {
				position: absolute;
				z-index: 3;
				border-radius: 12rpx;
				box-shadow: 0 2rpx 8rpx rgba(42,130,228,0.10);
				// background: #fff;
				// border: 2rpx solid #2A82E4;
				transition: box-shadow 0.2s;
			}
		}
	}
	
}	       

/* 走廊按钮样式 */
.corridor-button {
	position: absolute;
	left: 50rpx;
	bottom: 100rpx;
	background-color: rgba(42, 130, 228, 0.8);
	color: #fff;
	padding: 10rpx 20rpx;
	border-radius: 50rpx;
	font-size: 18rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	z-index: 100;
	
	&:active {
		transform: scale(0.95);
		background-color: rgba(42, 130, 228, 1);
	}
}

</style>


